<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <!--Meta Informations-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="referrer" content="no-referrer">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--Site Title-->
    <title>知识路径图</title>

    <!--Favicons-->
    <link rel="apple-touch-icon" sizes="60x60" th:href="@{assets/favicon/logo2.png}">
    <link rel="icon" type="image/png" th:href="@{assets/favicon/logo5.png}" sizes="32x32">
    <link rel="icon" type="image/png" th:href="@{assets/favicon/logo4.png}" sizes="16x16">
    <link rel="manifest" th:href="@{assets/favicon/manifest.json}">
    <link rel="mask-icon" th:href="@{assets/favicon/safari-pinned-tab.svg}" color="#5bbad5">
    <link rel="shortcut icon" th:href="@{assets/favicon/logo3.png}">
    <meta name="msapplication-config" content="assets/favicon/browserconfig.xml">
    <meta name="theme-color" content="#ffffff">

    <!--Style Assets-->
    <link rel="stylesheet" th:href="@{bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{vendors/fontawesome/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{vendors/owl/owl.carousel.css}">
    <link rel="stylesheet" th:href="@{vendors/magnific/magnific-popup.css}">
    <link rel="stylesheet" th:href="@{vendors/bootstrap-select/css/bootstrap-select.min.css}">


    <!--Theme Style-->
    <link rel="stylesheet" th:href="@{assets/css/styles.css}">

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style type="text/css">
        .bookDiv
        {
            white-space:normal;
            word-break:break-all;
            word-wrap:break-word;
        }
    </style>
</head>
<body>

<div id="page" class="site row">

    <h1 class="sr-only">知识路径图</h1>

    <header id="header" class="site-header">

        <nav class="navbar navbar-defatult navbar-fixed-top fluid-navbar navbar-style1">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a th:href="@{/}" class="navbar-brand">
                        <img th:src="@{assets/icons/logo9.png}" alt="" class="logo-img"></a>
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav"
                            aria-expanded="false">
                        <span class="sr-only">Nav Opener</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse" id="main-nav">
                    <ul class="navbar-nav nav navbar-right">
                        <li><a th:href="@{/}">主页</a></li>
                        <li class="active"><a th:href="@{show}">知识路径图</a></li>
                        <li><a th:href="@{login}" th:if="${session.user == null}"><i class="fa fa-sign-in"></i> 登录 </a></li>
                        <li><a th:href="@{register}" th:if="${session.user == null}"><i class="fa fa-user"></i> 注册 </a></li>
                        <li><a th:href="@{personal_center}" th:if="${session.user != null}" class="mark-img" data-spm-anchor-id="5176.12281949.0.0">
                            <img class="userPhoto" style="width: 22px; height: 22px; vertical-align: middle; margin-right: 10px;
                                        border-radius: 15px;" src="https://ucc.alicdn.com/avatar/avatar3.jpg">
                            <span th:text="${session.user.getName()}"></span>
                        </a>
                        </li>
                        <li><a th:href="@{login}" th:if="${session.user != null}">退出登录</a></li>
                    </ul>
                </div>
            </div>
        </nav>

        <!--Page Cover-->
        <section class="row page-cover" data-slide="assets/images/slide1.jpg">
            <div class="container">
                <h2 class="this-title">知识路径图</h2>
                <ol class="breadcrumb">
                    <li><a th:href="@{/}">主页</a></li>
                    <li class="active">知识路径图</li>
                </ol>
            </div>
        </section>

    </header>

    <main id="contents" class="site-contnts">

        <!--Blogs-->
        <section class="row blog-section">
            <div class="container">
                <div class="row">
                    <div class="col-md-4 sidebar">
                        <aside class="row widget widet_search">
                            <h4 class="widget-title">搜索</h4>
                            <form th:action="@{show}" role="search" class="searchform input-group">
                                <label>
                                    <input type="search" name="search" class="form-control" placeholder="输入你想查看的知识点">
                                </label>
                                <span class="input-group-addon"><button type="submit"><i class="fa fa-search"></i></button></span>
                            </form>
                        </aside>
                    </div>
<!--                    <div class="col-md-4 sidebar">-->
<!--                        <aside class="row widget widget_categories">-->
<!--                            <h4 class="widget-title">Categories</h4>-->
<!--                            <ul>-->
<!--                                <li class="cat-item"><a href="#">VPS Hosting Services</a>(12)</li>-->
<!--                                <li class="cat-item"><a href="#">Shared Hosting News and Services</a>(16)</li>-->
<!--                                <li class="cat-item"><a href="#">Search Engine Optiomisation</a>(19)</li>-->
<!--                                <li class="cat-item"><a href="#">Wordpress Hosting Services</a>(22)</li>-->
<!--                                <li class="cat-item"><a href="#">Web Hosting</a>(25)</li>-->
<!--                            </ul>-->
<!--                        </aside>-->
<!--                    </div>-->
                    <div class="col-md-4 sidebar">
                        <aside class="row widget widget_tag_cloud">
                            <h4 class="widget-title">示例标签</h4>
                            <div class="tagcloud">
                                <a href="/show?search=机器学习" class="tag-link-1" title="Hosting">机器学习</a>
                                <a href="/show?search=神经网络" class="tag-link-1" title="Shared Hosting">神经网络</a>
                                <a href="/show?search=深度学习" class="tag-link-1" title="Shared Hosting">深度学习</a>
                                <a href="/show?search=自然语言处理" class="tag-link-1" title="Shared Hosting">自然语言处理</a>
                            </div>
                        </aside>
                    </div>

                </div>
                <div class="col-md-12">
                    <div id="gxt" style="height:826px"></div>
                </div>
            </div>
        </section>

    </main>

    <!--Footer-->
    <footer id="footer" class="site-footer">
        <!--Footer Bottom-->
        <section class="row site-footer-bottom">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6 widget-footer">
                        <div class="row widget-content">
                            <ul class="menu">
                                <li style="color: #939393">鲁ICP备20006308</li>
                                <li>
                                    <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=37011202000992" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
                                        <img th:src="@{assets/images/beian.png}" style="float:left;"/>
                                        <p style="float:left;height:20px;line-height:20px;margin: 0 0 0 5px; color:#939393;">鲁公网安备 37011202000992号</p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </footer>

</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script th:src="@{vendors/jquery.min.js}"></script>
<script th:src="@{echarts/echarts.js}"></script>
<script th:src="@{echarts/macarons.js}"></script>


<script th:src="@{bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{vendors/owl/owl.carousel.min.js}"></script>
<script th:src="@{vendors/mcustomscrollbar/jquery.mCustomScrollbar.concat.min.js}"></script>
<script th:src="@{vendors/magnific/jquery.magnific-popup.min.js}"></script>
<script th:src="@{vendors/isotope.pkgd.min.js}"></script>
<script th:src="@{vendors/imagesloaded.pkgd.min.js}"></script>
<script th:src="@{vendors/form-validator/jquery.form.js}"></script>
<script th:src="@{vendors/form-validator/jquery.validate.min.js}"></script>
<script th:src="@{vendors/waypoint/waypoints.min.js}"></script>
<script th:src="@{vendors/couterup/jquery.counterup.min.js}"></script>
<script th:src="@{vendors/bootstrap-select/js/bootstrap-select.min.js}"></script>
<!--Theme JS-->
<script th:src="@{assets/js/hostpro.js}"></script>

<!--生成关系图-->
<script>
    var myChart = echarts.init(document.getElementById("gxt"), "macarons", {renderer: 'svg'});
    var nodes;
    var links;
    var option;
    var books;
    var centerIndex = 0;
</script>
<script th:inline="javascript">
    var search = [[${param.search}]];
    // console.log(search);
    if(search === null) {
            search = "机器学习";
        }
    $.ajax({
            url: "API/graph?search=" + search,
            type: "get",
            success: function (data) {
                if (data !== "null") {
                    data = JSON.parse(data);
                    nodes = data.nodes;
                    nodes[0].centerIndex = centerIndex++;
                    console.log(nodes[0]);
                    links = data.links;
                    // books = data.books;
                    categories = data.categories;
                    option = {
                        tooltip: {
                            trigger: 'item',
                            borderRadius: 8,//边框圆角
                            formatter: function (params) {
                                if (params.dataType === 'node') {
                                    // return "<div style='max-width: 600px;'>" +
                                    return "<div style='float:left'>" +
                                        "<h2 class='lp-title text-center' style='padding: 20px 0 20px 0;max-width: 500px;'>收藏</h2>" +
                                        // "<div class='bookDiv' style='padding: 0 10px 0 10px;max-width: 500px;'>" + books[params.data.centerIndex].quote + " </div>" +
                                        "</div>";
                                    // "</div>";
                                }
                            }
                        },
                        legend: [{
                            // selectedMode: 'single',
                            data: categories
                        }],
                        series: [{
                            type: 'graph',
                            layout: 'force',
                            animation: false,
                            focusNodeAdjacency: true,//突出相邻
                            roam: true,
                            label: {//标签位置
                                normal: {
                                    position: 'inside',
                                    formatter: '{b}',
                                    textStyle: {
                                        color: '#2D2F3B',
                                        fontWeight: 'bolder'
                                    },
                                    show: true
                                }
                            },
                            edgeSymbol: ['circle', 'arrow'],
                            edgeLabel: {
                                normal: {
                                    show: true,
                                    color: 'red',
                                    formatter: function (x) {
                                        return x.data.name;
                                    }
                                }
                            },

                            symbolSize: function (value, x) {//设置图像的大小
                                switch (x.data.category) {
                                    case 3:
                                        return 60;
                                    case 4:
                                        return 80;
                                    default:
                                        return 50;
                                }
                            },

                            draggable: true,
                            data: nodes,
                            categories: categories,
                            force: {
                                // initLayout: 'circular'
                                // repulsion: 20,
                                repulsion: 200,
                                gravity: 0.01,
                                edgeLength: [100, 300]
                                // edgeLength:function (value,x) {
                                //     return x.data.length;
                                // }
                            },
                            edges: links,
                            lineStyle: {
                                color: 'source',
                                curveness: 0.2
                            },
                            emphasis: {
                                lineStyle: {
                                    width: 10
                                }
                            }
                        }]

                    };

                    myChart.on('click', function (params) {
                        if (params.dataType === 'node'&&params.data.category===1){
                            nodes[params.dataIndex].category = 0;
                            nodes[params.dataIndex].centerIndex = centerIndex++;
                            // console.log(params);
                            getMoreJson(params.name);
                        }
                        if(params.dataType === 'node'&&params.data.category===0){
                            window.open("book?search="+params.name);
                        }
                            // alert(encodeURIComponent(params.name));

                    });
                    myChart.setOption(option);
                } else {
                    document.getElementById("gxt").innerHTML = "<p>很抱歉，没有搜索到该知识。原因可能是：<br/>" +
                        "<ul><li>本知识网络还未收录该知识点</li><li>您搜索的知识并不属于计算机知识点</li></ul>" +
                        "您可以搜索其他感兴趣的知识</p>"
                }

            },
            error: function (data) {
                console.log(data);
            }
        })



</script>
<script>
    function getMoreJson(name) {
        $.ajax({
            url: "API/graph?name=" + name,
            type: "get",
            success: function (data) {
                if (data !== "null") {
                    data = JSON.parse(data);
                    newNodes = data.nodes;
                    // console.log(newNodes);
                    for (let node of newNodes) {
                        nodes.push(node);
                    }
                    newLinks = data.links;
                    // console.log(nodes);
                    for (let link of newLinks) {
                        links.push(link);
                    }
                    myChart.setOption(option);
                }

            },
            error: function (data) {
                console.log(data);
            }
        })
    }

</script>

</body>
</html>